<template>
	<view class="collection">
		<view class="collection-header">多票混贴识别摆放示意图</view>
		<view class="collection-tips">
			<img class="" src="./img/icon-shibietu.png" />
			<view class="takecare">
				<img class="" src="./img/icon-jinggao.png" />
				注意
			</view>
			<view class="note">
				<view class="note-li" v-for="(item, index) in data.list" :key="index"> {{ (index + 1) + '、' }}{{ item }}
				</view>
			</view>
		</view>
		<!-- 識別 -->
		<view class="recognize">
			<view class="example-body">
				<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
					file-mediatype="image">开始识别</uni-file-picker>
			</view>
		</view>
	</view>
</template>

<script setup>

import { reactive } from 'vue';
const data = reactive({
	list: [
		"背景色应与票面颜色存在较大反差;",
		"票据文字呈一个方向摆放;",
		"票据之间不要覆盖，预留1cm以上空隙;",
		"建议数量控制在6张以内。",
	]
})


const upload = () => {
	this.$refs.files.value.upload()
}
</script>

<style lang="less" scoped>
.collection {
	width: 100%;
	height: calc(100vh - 88rpx);
	box-sizing: border-box;
	overflow: hidden;
	background-color: #F5F5f5;

	.collection-header {
		height: 24rpx;
		line-height: 24rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #212121;
		text-align: center;
		margin: 24rpx 0;
	}

	.collection-tips {
		width: 96%;
		background: #ffffff;
		border-radius: 5rpx;
		margin: 7rpx auto 0;
		padding: 24rpx 16rpx;
		box-sizing: border-box;
		overflow: hidden;

		img {
			width: 100%;
			margin-bottom: 5rpx;
		}

		.takecare {
			height: 40rpx;
			line-height: 40rpx;

			img {
				width: 30rpx;
				height: 26rpx;
				vertical-align: middle;
			}
		}

		.note {
			color: #212121;
			font-size: 26rpx;
			height: auto;
			margin: 10rpx 0;
			overflow: hidden;
			text-align: left;

			.note-li {
				line-height: 30rpx;
			}
		}
	}
}

.recognize {
	width: 100%;
	position: relative;
	margin-top: 20rpx;
	text-align: center;
}
:deep(.file-picker__box) {
	height: 100rpx !important;
	width: 94% !important;
	margin: 0 auto!important;
	color: #fff;
	background-color: #33C5B9!important;
	border: 1px solid #33C5B9 !important;
	padding-top: 0;
	border-radius: 18rpx;

	.file-picker__progress {
		display: none;
	}
	.file-picker__box-content{
		border: none !important;
	}

	.icon-add {
		width: 100%;
		text-align: center;
		height: 2px;
		background-color: rgb(0, 0, 0);
	}
}
</style>
